/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef } from 'react';
import { Collapse } from 'antd';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import virtualDom from '@/assets/images/advanceReact/virtual_dom.png';
import efficiency from '@/assets/images/advanceReact/efficiency.png';

import 'highlight.js/styles/atom-one-light.css';
import './index.less';

const { Panel } = Collapse;
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (error) {
        console.log(error);
      }
    }
    return ''; // 使用额外的默认转义
  },
});

export default function VirtualDOM() {
  return (
    <div className="advance-react-wrapper">
      <Collapse defaultActiveKey={['1', '2', '3']}>
        <Panel header="1、为什么需要虚拟DOM" key="1">
          <p>
            1、传统回答：“DOM操作是很慢的，而JS却可以很快，直接操作DOM可能会导致频繁的回流与重绘，JS不存在这些问题。因此虚拟DOM比原生DOM更快”
          </p>
          <p>
            2、虚拟DOM本质上是JS和DOM之间的一个映射缓存，在形态上表现为一个能够描述DOM结构及其属性信息的JS对象
          </p>
          <p>3、虚拟DOM是一个js对象，是对真实DOM的描述</p>
          <img src={virtualDom} alt="" width="50%" />
        </Panel>
        <Panel header="2、目的、性能" key="2">
          <p>
            虚拟DOM能够在提供<b>更爽、更高效</b>的研发模式的同时仍然保持一个还不错的性能。
          </p>
          <img src={efficiency} alt="" width="50%" />
          <p>
            可以看出，两者的效率取决于diff的计算开销，虚拟DOM的劣势主要在于JS计算的耗时，DOM操作的能耗和JS计算的能耗根本不在一个量级。
          </p>
        </Panel>
        <Panel header="3、虚拟DOM解决了那些关键问题" key="3">
          <ul>
            <li>研发体验、效率</li>
            <li>
              跨平台的问题，一次编码为虚拟DOM层，最后可以渲染为Web界面、iOS界面、安卓界面、小程序界面，实现多端运行。
            </li>
            <li>批量更新：利用batch函数来处理，缓冲每次生成的补丁集</li>
          </ul>
        </Panel>
      </Collapse>
    </div>
  );
}
